<template>
  <div>
    <el-card class="box-card">
      <div class="">
        <div>
          <el-select v-model="parms.courseStatus" placeholder="课程状态" clearable style="width: 200px;margin-right:20px" size="mini">
            <el-option :value="0" label="禁用"/>
            <el-option :value="1" label="启用"/>
          </el-select>
          <!-- <el-select v-model="parms.courseType" placeholder="课程状态" clearable style="width: 200px;margin-right:20px" size="mini">
            <el-option :value="1" label="课程"/>
            <el-option :value="2" label="章节"/>
          </el-select> -->
          <el-input v-model="parms.courseName" clearable style="width: 200px;margin-right:20px" size="mini" placeholder="课程名称"></el-input>
          <el-button size="mini" type="primary" @click="serch" icon="el-icon-search">搜索</el-button>
          <el-button size="mini" type="primary" @click="add" icon="el-icon-plus">新增</el-button>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top: 20px">
      <el-table :data="tableData" border="" style="width: 100%" @selection-change="handleSelectionChange" v-loading="loading">
        <el-table-column type="selection" width="50" />
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column label="课程名称" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="text" @click="openChild(scope.row.id)">{{scope.row.courseName}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="210">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="editor(1,scope.row)" v-if="scope.row.courseType == 1">编辑</el-button>
            <el-button size="mini" type="text" @click="editor(2,scope.row)" v-if="scope.row.courseType == 2">编辑</el-button>
            <el-button size="mini" type="text" @click="addChapter(scope.row.id)" v-if="scope.row.courseType == 1">加章节</el-button>
            <el-button size="mini" type="text" @click="openSchool(scope.row.id)" v-if="scope.row.courseType == 1">开课学校</el-button>
            <el-button size="mini" type="text" style="color: red" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="courseClassName" label="课程大类" align="center" />
        <el-table-column prop="courseParentName" label="父级课程" align="center" />
        <el-table-column label="课程类型" align="center" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.courseType == 1">课程</span>
            <span v-else>章节</span>
          </template>
        </el-table-column>
        <el-table-column label="课程状态" align="center" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.courseStatus == 0">禁用</span>
            <span v-else>启用</span>
          </template>
        </el-table-column>
        <el-table-column prop="courseDetail" label="课程简介" align="center" show-overflow-tooltip/>
        <el-table-column prop="courseDetailDescription" label="课程详情" align="center" show-overflow-tooltip/>
        <el-table-column prop="courseChapter" label="章节数" align="center" width="70"/>
        <el-table-column prop="courseDuration" label="课程时长" align="center" width="80"/>
        <el-table-column label="强度" align="center" width="50">
          <template slot-scope="scope">
            <span v-if="scope.row.strengthGrade == 1">低</span>
            <span v-if="scope.row.strengthGrade == 2">中</span>
            <span v-if="scope.row.strengthGrade == 3">高</span>
          </template>
        </el-table-column>
        <el-table-column label="水平" align="center" width="60">
          <template slot-scope="scope">
            <span v-if="scope.row.courseLevel == 1">初级</span>
            <span v-if="scope.row.courseLevel == 2">中级</span>
            <span v-if="scope.row.courseLevel == 3">高级</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="parms.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="parms.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        style="margin-top: 20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-card>
    <el-dialog title="新增" :visible.sync="dialogVisible" width="65%">
      <Add @handCancle="handCancle"></Add>
    </el-dialog>
    <el-dialog title="开课学校" :visible.sync="dialogVisible1" width="50%">
      <Classes @handCancle="handCancle" :id="id" :showDialog="dialogVisible1"></Classes>
    </el-dialog>
    <el-dialog title="编辑课程" :visible.sync="dialogVisible2" width="65%">
      <Editor @handCancle="handCancle" :id="id" :showDialog="dialogVisible2"></Editor>
    </el-dialog>
    <el-dialog title="加章节" :visible.sync="dialogVisible3" width="65%">
      <Chapter @handCancle="handCancle" :id="id" :showDialog="dialogVisible3"></Chapter>
    </el-dialog>
    <el-dialog title="编辑章节" :visible.sync="dialogVisible4" width="65%">
      <Editor1 @handCancle="handCancle" :id="id" :showDialog="dialogVisible4" :courobj="obj"></Editor1>
    </el-dialog>
    <el-dialog title="章节信息" :visible.sync="dialogVisible5" width="80%">
      <Child @handCancle="handCancle" :id="id" :showDialog="dialogVisible5"></Child>
    </el-dialog>
  </div>
</template>

<script>
import Add from './add.vue'
import Classes from './classes.vue'
import Editor from './editor.vue'
import Editor1 from './editor1.vue'
import Chapter from './addChapter.vue'
import Child from './child.vue'
import { getList, del } from '@/api/course/standard'
export default {
  components: {
    Add,
    Classes,
    Editor,
    Chapter,
    Editor1,
    Child
  },
  data() {
    return {
      input: '',
      options: '',
      tableData: [],
      switch1: true,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      dialogVisible5: false,
      value: 10,
      total: null,
      parms: {
        pageNum: 1,
        pageSize: 5,
        courseName: '',
        courseStatus: '',
        courseType: 1
      },
      id: null,
      loading: false,
      obj: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    openChild(id) {
      this.id = id
      this.dialogVisible5 = true
    },
    del(id) {
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      }).then(() => {
        del(id).then(res => {
          if(res.code === 200) {
            this.$message.success('删除成功')
            this.getList()
          }
        })
      }).catch(() => {});
    },
    addChapter(id) {
      this.id = id
      this.dialogVisible3 = true
    },
    serch() {
      this.getList()
    },
    getList() {
      this.loading = true
      
      getList(this.parms.pageNum, this.parms.pageSize, this.parms.courseName, this.parms.courseStatus, this.parms.courseType).then(res => {
        // arr = res.rows
        // for(let i=0;i<arr.length;i++) {
        //   if(arr[i].courseType == 1) {
        //     this.tableData.push(arr[i])
        //   }
        // }
        this.tableData = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    editor(e,row) {
      if(e == 1) {
        this.id = row.id
        this.dialogVisible2 = true
      } else {
        this.id = row.id
        this.dialogVisible4 = true
      }
      
    },
    openSchool(id) {
      this.id = id
      this.dialogVisible1 = true
    },
    handCancle(e) {
      if(e == 1){
        this.getList()
      }else{
        this.dialogVisible5 = false
        this.dialogVisible4 = true
        this.obj = e
        return
      }
      this.dialogVisible = false
      this.dialogVisible1 = false
      this.dialogVisible2 = false
      this.dialogVisible3 = false
      this.dialogVisible4 = false
      this.dialogVisible5 = false
    },
    add() {
      this.dialogVisible = true
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.parms.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.parms.pageNum = val
      this.getList()
    }
  }
}
</script>

<style>
.flex{
  display: flex;
  justify-content: space-between;
}
.el-table th.gutter {
  display: table-cell !important
}
</style>
